<template>
  <div class="policy-handle">
    <div class="handle-wrap">
      <div class="search">
        <el-form :inline="true" @submit.native.prevent>
            <el-form-item label="地域">
                <el-select v-model="searchForm.curRegion" :multiple="false" filterable clearable placeholder="请选择">
                    <el-option  v-for="(item,index) in regionList"  :key="index"  :label="item"  :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发布年份">
                <el-select v-model="searchForm.publishYear" :multiple="false" filterable clearable placeholder="请选择">
                    <el-option  v-for="(item,index) in publishYearList"  :key="index"  :label="item"  :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="批次号">
                <el-input  v-model="searchForm.importNumber" placeholder="请输入内容"  @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item label="加工状态">
                <el-select v-model="searchForm.state" :multiple="false" filterable clearable placeholder="请选择">
                    <el-option  v-for="(item,index) in stateList"  :key="index"  :label="item.label"  :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文本">
                <el-input size="small" v-model="searchInput" placeholder="请输入内容" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" @click="handleSearch()">搜索</el-button>
            </el-form-item>
        </el-form>
      </div>

      <div class="op-area">
          <router-link :to="{path: '/permission/policyModify'}">
            <el-button class="addButton" size="mini" icon="el-icon-document" @click="addPolicy">
              新增
            </el-button>
          </router-link>
      </div>

      <div class="table-area">
            <el-table v-loading="listLoading" :data="tableList" border class="table" >
                <el-table-column label="ID" prop="id" width="50"></el-table-column>
                <!--<el-table-column label="政策标识符" prop="keyword" width="60"></el-table-column>-->
                <el-table-column label="政策标题" prop="title" width="280"></el-table-column>
                <el-table-column label="发文字号" prop="number" width="80"></el-table-column>
                <el-table-column label="发布机构" prop="publishOrgan" width="80"></el-table-column>
                <el-table-column label="发布日期" prop="publishDate" width="80"></el-table-column>
                <el-table-column label="地域" prop="region" width="80"></el-table-column>

                <el-table-column label="获取网址" prop="url"></el-table-column>
<!--
                <el-table-column label="全文" prop="content" width="650"></el-table-column>
                <el-table-column label="主题分类" prop="category" width="80"></el-table-column>
-->
                <el-table-column label="关键词" prop="keyword" width="80"></el-table-column>
                <el-table-column label="入库时间" prop="createDate" width="100"></el-table-column>
                <el-table-column label="批次号" prop="importNumber" width="100"></el-table-column>
                <el-table-column label="加工状态" prop="_onlyshow_state" width="100"></el-table-column>
                <el-table-column label="操作" width="50">
                    <template slot-scope="scope">
                        <template v-if="scope.row.state!=2">
                            <router-link :to="{path: '/permission/policyModify', query: {id:scope.row.id}}">
                                <el-button type="text" size="small">加工</el-button>
                            </router-link>
                            <el-button @click="unModiPolicy( scope.row.id )" type="text" size="small">不加工</el-button>
                            <el-button @click="delPolicy( scope.row.id )" type="text" size="small">删除</el-button>
                        </template>
                        <template v-if="scope.row.state==2">    <!-- 不加工状态的, 只能删除 -->
                            <el-button @click="delPolicy( scope.row.id )" type="text" size="small">删除</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
      </div>
      <div class="pagination">
            <pagination v-show="total > 0"  :total="total"  :page.sync="listQuery.page"  :limit.sync="listQuery.limit"  @pagination="getTableData"/>
      </div>
    </div>
  </div>
</template>

<script>
  import {searchArticle, deleteArticle, setState} from "@/api/mark-policy";
  import { getAllRegion } from '@/api/matrix'
  import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

  export default {
    name: 'hand',
    components: {Pagination},
    data() {
      return {
        searchInput: '',
        listLoading: false,
        dialogFormVisible: false,
        formLabelWidth: '120px',
        tableList: [],
        total: 0,
        listQuery: {
          page: 1,
          limit: 10
        },

        searchForm:{
            curRegion:'',
            searchInput: '',
            importNumber:'',
            state:'',
            publishYear:'',
        },

        regionList:[],
        publishYearList:[],

        //markStateList:[{value:'0',label:'未标引'}, {value:'1',label:'未完成'}, {value:'2',label:'已完成'}],     // 这里的0要用字符串格式, 在getTableData()里有判断。
        stateList:[{value:'0',label:'未加工'}, {value:'1',label:'已加工'}, {value:'2',label:'不加工'}],         // 这里的0要用字符串格式, 在getTableData()里有判断。


      }
    },
    computed: {},
    created() {
      this.getAllRegion();
      for(let i=2021; i>1990; i--){
        this.publishYearList.push( i );
      }
      this.getTableData();
    },
    methods: {
          //1.城市列表
        getAllRegion(){
            getAllRegion().then(res => {
                // 预处理数据: 把全国放第一, 去掉null。
                if( res.result && res.result.indexOf('全国') > -1 ){
                    res.result.splice( res.result.indexOf('全国'), 1);
                    res.result.unshift('全国');
                }
                this.regionList = res.result;
            })
        },

      handleSearch(){
        this.listQuery.page = 1;
        this.getTableData();
      },
      getTableData() {
        let param = {
          pageSize: this.listQuery.limit,
          pageNum: this.listQuery.page,

          regions: this.searchForm.curRegion,
          key: this.searchInput,
          importNumber: this.searchForm.importNumber,
          state: this.searchForm.state,
          publishYear: this.searchForm.publishYear,
        };

        this.listLoading = true;
        searchArticle(param).then(res => {
            // 数据预处理
            let stateArr = { '0':'未加工', '1':'已加工', '2':'不加工'};

            if(!res.result.list){res.result.list=[];}
            res.result.list.forEach((item) => {
                item._onlyshow_state = stateArr[item.state];
            });

            this.tableList = res.result.list;
            this.total = res.result.total;
            this.listLoading = false;
        })
      },

      delPolicy(id) {
        console.log('delPolicy', id);
        this.$confirm("删除政策会把标引语句也删除。确定删除?", {type: "warning"}).then(() => {
            deleteArticle({id:id}).then(res => {
              this.getTableData();
            });
        }).catch(() => {})
      },

        // 把政策设置为 不加工 状态。 即在前台不显示。
      unModiPolicy(id) {
        this.$confirm("设置为“不加工”状态，则该政策不会在前台显示。确定设置?", {type: "warning"}).then(() => {
            let param={
                id : id,
                state: 2,
            }
            setState(param).then(res => {
                this.getTableData();
                this.$message({ message: '设置成功！', type: 'success' });
            });
        }).catch(() => {})
      },

      addPolicy() {
      },

    }
  }
</script>

<style lang="less" scoped>
  .policy-handle {
    padding: 36px;

    .words-wrap {
      width: 50%;
      margin: auto;
    }

    .search {
      /*width: 300px;*/
      display: flex;
      margin-bottom: 24px;
    }

    .op-area {
      margin-bottom: 24px;

    }
  }

</style>
